<!DOCTYPE html>
<html>
<head>
	<script src="//code.jquery.com/jquery-3.6.4.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />

	<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="../demos.html">JsRender Demos</a><br />

<h3>Compiling named templates from strings</h3>

<button id="switchBtn">Show full details</button><br/>
<br />
<table>
	<tbody id="movieList"></tbody>
</table>

<script type="text/javascript">
	var movies = [
		{ name: "The Red Violin", releaseYear: "1998", director: "Francois Girard" },
		{ name: "Eyes Wide Shut", releaseYear: "1999", director: "Stanley Kubrick" },
		{ name: "The Inheritance", releaseYear: "1976", director: "Mauro Bolognini" }
	];

	/* Compile markup as named templates */
	$.templates({
		titleTemplate: "<tr><td colspan=3>{{>name}}</td></tr>",
		detailTemplate: "<tr><td>{{>name}}</td><td>Released: {{>releaseYear}}</td><td>director: {{>director}}</td></tr>"
	});

	var details = true;

	function switchTemplates() {
		var html,
			button = $("#switchBtn");

		details = !details;

		/* Render using the other named template */
		if ( details ) {
			button.text( "Show titles only" );
			html = $.render.detailTemplate( movies );
		} else {
			button.text( "Show full details" );
			html = $.render.titleTemplate( movies );
		}
		$( "#movieList" ).html( html );
	}

	$( "#switchBtn" ).click( switchTemplates );

	switchTemplates();
</script>

</body>
</html>